<template>
  <div class="seckill-component" id="seckill-component">
    <div class="app-header-nav">
      <el-image :src="nav" fit="cover"></el-image>
    </div>
    <div class="app-header-banner">
      <el-image
        :src="seckilData.coverImg | coverImgFilter"
        fit="cover"
      ></el-image>
      <div class="app-header-card">
        <p class="app-header-card-title">
          {{ seckilData.activeTitle | appData('activeTitle') }}
        </p>
        <div class="app-header-card-price">
          <div class="seckill">
            <el-image
              :src="card_seckill"
              fit="cover"
              class="card_seckill"
            ></el-image>
            <p class="card_text">秒杀价</p>
          </div>
          <div>
            <span class="red weight"
              >￥{{ seckilData.seckillPrice | appData('seckillPrice') }}</span
            ><span class="oringe"
              >￥{{ seckilData.originalPrice | appData('originalPrice') }}</span
            >
            <span class="red">
              仅剩{{ seckilData.buyNum | appData('buyNum') }}份</span
            >
          </div>
        </div>
        <div class="app-header-card-time">
          <el-image
            :src="card_time_img"
            fit="cover"
            class="card_time_img"
          ></el-image>
          <p class="card_time_text">
            活动时间：{{
              seckilData.activeStartTime | appData_startTime('activeStartTime')
            }}
            至
            {{ seckilData.activeEndTime | appData_endTime('activeEndTime') }}
          </p>
        </div>
        <el-image :src="card_right" fit="cover" class="card_right"></el-image>
        <div class="last-title">
          <p class="last-name">距报名结束仅剩</p>
          <div class="last-time">
            <span>1天</span>
            <span class="last-time-item">09</span>
            <span>:</span>
            <span class="last-time-item">04</span>
            <span>:</span>
            <span class="last-time-item">59</span>
          </div>
        </div>
      </div>
    </div>
    <div class="app-content">
      <div class="app-content-store">
        <div class="app-content-title app-content-store-title">
          活动门店
          <div class="app-content-line"></div>
        </div>

        <p class="app-content-store-name">
          {{ seckilData.activityStoreNname }}
        </p>
        <p class="app-content-store-address">
          深圳市南山区科技园桑达科技大厦1105
        </p>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6" class="commodity-list">
            <p class="commodity-list-item-1">1.15km</p>
            <p class="commodity-list-item-2">距离</p>
          </el-col>
          <el-col :span="6">
            <p class="commodity-list-item-1">3人</p>
            <p class="commodity-list-item-2">服务顾问</p>
          </el-col>
          <el-col :span="6" class="vertical-center">
            <el-image
              :src="phone"
              fit="cover"
              class="vertical-center-item-1"
            ></el-image>
            <el-image
              :src="address"
              fit="cover"
              class="vertical-center-item-2"
            ></el-image>
          </el-col>
        </el-row>
      </div>
      <div class="app-content-project">
        <div class="app-content-title app-content-store-title">
          商品/服务项目
          <div class="app-content-line"></div>
        </div>
        <div v-for="(item, index) in goodsList" :key="index">
          <p>
            <span class="project-name">{{ item.name }}</span
            ><span class="project-number"> 数量：{{ item.num }}</span>
          </p>
          <p>
            <span class="project-capacity">规格容量：{{ item.capacity }}</span
            ><span class="project-price">市场价：{{ item.worth }}</span>
          </p>
        </div>
        <div class="price-total">总价值：￥{{ goodsList | total_price }}</div>
      </div>
      <div class="app-content-introduce">
        <div class="app-content-title app-content-store-title">
          活动介绍
          <div class="app-content-line"></div>
        </div>
        <el-image
          :src="seckilData.detailImg | detailImgFilter"
          fit="cover"
          class="card_introduce"
        ></el-image>
      </div>
    </div>
    <div class="app-footer">
      <div class="app-footer-btn btn-share">分享好友</div>
      <div class="app-footer-btn btn-buy">立即抢购</div>
    </div>
  </div>
</template>

<script>
let defaultData = {
  activeTitle: '一键加油 | 立减20元',
  seckillPrice: '500',
  originalPrice: '5000',
  buyNum: '100',
  activeStartTime: null,
  activeEndTime: '0',
  inventoryNum: null,
  fictitiousNum: null,
  activityStore: 0,
  coverImg: null,
  detailImg: null,
  shareImg: null,
}
export default {
  name: 'SeckillMobile',
  props: {
    seckilData: {
      activeTitle: {
        type: String,
      },
      seckillPrice: {
        type: String,
        default() {
          return '0'
        },
      },
      originalPrice: {
        type: String,
        default() {
          return '0'
        },
      },
      buyNum: {
        type: String,
        default() {
          return '0'
        },
      },
      activeStartTime: {
        type: String,
        default() {
          return '0'
        },
      },
      activeEndTime: {
        type: String,
        default() {
          return '0'
        },
      },
    },
    goodsList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  filters: {
    appData(val, key) {
      if (val && val != '') {
        return val
      } else {
        return defaultData[key]
      }
    },
    appData_startTime(val, key) {
      if (val && val != '') {
        let date = new Date(val)
        let year = date.getFullYear() // 获取当前年份(2位)
        let month = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
        let day = date.getDate() // 获取当前日(1-31)
        //修改月份格式
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }

        //修改日期格式
        if (day >= 0 && day <= 9) {
          day = '0' + day
        }
        return year + ':' + month + ':' + day
      } else {
        var date = new Date()

        var year = date.getFullYear() //年 ,从 Date 对象以四位数字返回年份
        var month = date.getMonth() + 1 //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
        var day = date.getDate() //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
        return year + ':' + month + ':' + day
      }
    },
    appData_endTime(val, key) {
      if (val && val != '') {
        return val
      } else {
        switch (val) {
          case 0:
            return '不限时间'
            break
          default:
            return defaultData[key]
        }
      }
    },
    total_price(val) {
      let total = 0
      val.map((item) => {
        total += item.worth * item.num
      })
      return total
    },
    coverImgFilter(val) {
      if (val && val != '') {
        return val
      } else {
        return require('./img/banner.png')
      }
    },
    detailImgFilter(val) {
      if (val && val != '') {
        return val
      } else {
        return require('./img/card_introduce.png')
      }
    },
  },
  mounted() {
    console.log(this.seckilData)
  },
  watch: {},
  data() {
    return {
      nav: require('./img/nav.png'),
      banner: require('./img/banner.png'),
      card_right: require('./img/card_right.png'),
      card_seckill: require('./img/ms.png'),
      card_time_img: require('./img/time.png'),
      phone: require('./img/phone.png'),
      address: require('./img/address.png'),
      card_introduce: require('./img/card_introduce.png'),
      list: [
        {
          name: '品牌玻璃水',
          number: 2,
          capacity: '18支/盒',
          price: 58,
        },
        {
          name: '品牌玻璃水',
          number: 2,
          capacity: '18支/盒',
          price: 58,
        },
      ],
    }
  },
  methods: {
    change(item, index) {
      this.list.map((item, i) => {
        if (i === index) {
          item.type = this.defaultType
        } else {
          item.type = ''
        }
      })
      this.$emit('change', item.value)
    },
  },
}
</script>

<style scoped>
.seckill-component {
  background: linear-gradient(to right, #eec5de, #ffecdb);
  width: 375px;
  font-size: 14px;
  margin: 0 auto;
}
.app-header-nav {
  height: 90px;
  width: 100%;
}
.app-header-banner {
  height: 246px;
  width: 100%;
  position: relative;
}
.app-header-banner .app-header-card {
  width: 100%;
  height: 110px;
  position: relative;
  position: absolute;
  left: 0;
  top: 140px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 32px;
  background: #fffefe;
}
.app-header-banner .app-header-card .card_right {
  width: 140px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.app-header-banner .app-header-card .last-title {
  width: 140px;
  position: absolute;
  text-align: right;
  right: 16px;
  top: 0;
  bottom: 0;
  transform: translate(0, 50%);
  margin-bottom: 40px;
  color: #fff;
}
.app-header-banner .app-header-card .last-title .last-name {
  margin-bottom: 6px;
  font-size: 13px;
}
.app-header-banner .app-header-card .last-title .last-time-item {
  background: #fff;
  padding: 6px 4px;
  margin: 0 4px;
  font-size: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #ff676c;
}

.app-header-banner .app-header-card .app-header-card-title {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
}
.app-header-banner
  .app-header-card
  .app-header-card-price
  .seckill
  .card_seckill {
  width: 44px;
  height: 20px;
}
.app-header-banner .app-header-card .app-header-card-price {
  margin: 10px 0;
}
.app-header-banner .app-header-card .app-header-card-price div {
  position: relative;
  display: inline-block;
  height: 20px;
}
.app-header-banner .app-header-card .app-header-card-time {
  width: 100%;
  position: relative;
  margin-top: 8px;
}
.app-header-banner .app-header-card .app-header-card-time .card_time_img {
  height: 20px;
  width: 220px;
  line-height: 20px;
}
.app-header-banner .app-header-card .app-header-card-time .card_time_text {
  position: absolute;
  height: 20px;
  margin: 0 8px;
  font-size: 12px;
  top: 0;
  left: 0;
  line-height: 20px;
  color: #fff;
}

.app-header-banner .app-header-card .app-header-card-price .seckill {
  position: relative;
  height: 20px;
  vertical-align: middle;
}
p {
  margin: 0;
}
.app-header-banner .app-header-card .app-header-card-price .seckill .card_text {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 20px;
  line-height: 20px;
  color: #fff;
  margin: 0 4px;
  font-size: 10px;
}
.red {
  color: #eb2963;
}
.weight {
  font-weight: 600;
}
.oringe {
  margin: 0 6px;
  text-decoration: line-through;
  color: #999;
}
.app-content {
  padding: 0 16px;
  box-sizing: border-box;
}
.app-content-store-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
}
.app-content-store-address {
  font-size: 13px;
  color: #999999;
  margin-bottom: 20px;
}
.app-content-title {
  font-size: 16px;
  color: #333333;
  font-weight: 700;
  display: inline-block;
  margin: 24px 0 16px;
}
.app-content-line {
  border-radius: 2px;
  height: 4px;
  background: linear-gradient(to bottom, #ffb97a, #f5295e, #c12984);
}
.commodity-list-item-1 {
  margin-bottom: 8px;
}
.commodity-list-item-2 {
  font-size: 14px;
}
.vertical-center {
  text-align: center;
  position: relative;
  right: 0%;
  transform: translateY(50%);
  margin-bottom: 12px;
}
.vertical-center-item-1 {
  margin-right: 24px;
}
.project-name,
.project-number {
  width: 50%;
  font-size: 14px;
  display: inline-block;
  font-weight: 700;
  margin-bottom: 20px;
}
.project-capacity,
.project-price {
  font-size: 14px;
  display: inline-block;
  width: 50%;
  margin-bottom: 20px;
  color: #999999;
}
.price-total {
  font-weight: 700;
  font-size: 14px;
}
.card_introduce {
  width: 100%;
  height: 296px;
}
.app-footer .app-footer-btn {
  width: 50%;
  height: 48px;
  line-height: 48px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}
.app-footer .btn-share {
  background: #fff;
  color: #666;
}
.app-footer .btn-buy {
  background: linear-gradient(to bottom, #ff666c, #ffb97a);
  color: #fff;
}
</style>
